/*
    2023/3/2
    产品详情页面（直接采用偷懒的作法：列表中将对象传到详情页，详情页面直接显示）

    
    2023/3/3
    添加了头、导航、底部等组件及样式
 */
<template>
    <div>
        <!--头部区域-->
        <PageHeader />

        <!--导航区域-->
        <PageNav />

        <!--内容区域-->
        <div class="list">
            <div class="box">
                <div class="detail">
                    <el-row>
                        <el-col :span="12">
                            <!--左侧大图-->
                            <div>

                                <el-carousel trigger="click" height="150px">
                                    <el-carousel-item v-for="item in imgs" :key="item">
                                        <img :src="item" />
                                    </el-carousel-item>
                                </el-carousel>

                            </div>
                        </el-col>
                        <el-col :span="12">
                            <!--右侧详情-->
                            <div>
                                <div>名称 {{ detailData.name }}</div>
                                <div>价格{{ detailData.salePrice }}</div>
                                <div>颜色:
                                    <el-tag type="success" v-for="(item, index) in color" :key="index">{{ item.specValue
                                    }}</el-tag>

                                </div>
                                <div>尺寸：
                                    <el-tag type="danger" v-for="(item, index) in size" :key="index">{{ item.specValue
                                    }}</el-tag>

                                </div>
                                <div>
                                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"
                                        label="描述文字"></el-input-number>
                                    <el-button type="success">立即购买</el-button>
                                    <el-button type="danger" @click="eventAddCar">加入购物车</el-button>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>

        <!--底部区域-->
        <PageFooter />
    </div>
</template>

<script>

//引入组件页面
import PageNav from '@/components/PageNav.vue'
import PageHeader from '@/components/PageHeader.vue'
import PageFooter from '@/components/PageFooter.vue'

export default {

    components: {
        //声明刚才我们引入的页面，是一个组件
        PageNav, PageHeader, PageFooter
    },
    data() {
        return {
            num: 1,
            detailData: {},
            imgs: [
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            ]
            , color: [],
            size: []
        }
    },
    mounted() {
        //接收列表页传过来的对象

        //this.detailData = this.$route.params.data
        let id = this.$route.query.id
        this.loadData(id)
    },
    methods: {
        //加入购物车按钮事件
        eventAddCar() {
            /**
             * 将商品添加到购物车中，4个元素必不可少
             * 用户id
             * 商品id
             * 商品数量
             * 商品价格
             * 
             */

            //从内存中拿到缓存的用户信息
            let userinfo = localStorage.getItem('localstroage_userinfo') 
            if(userinfo == undefined){
                this.$message.error('请登录')
                return 
            }
            //需要将josn字符串转换为json对象
            let user = JSON.parse(userinfo)

            let memberid= user.id   ///会员id：是通过登录而来的
            let goodsid=this.$route.query.id  //商品ID，是列表页传过来的
            let goodsprice = this.detailData.salePrice //商品价格：是根据id查出来的
            let goodsnumber = this.num //商品数量：是根据计数器来的
            let url = this.$baseUrl + 'api/shoppingcar'
            let data = {
                "goodsId": goodsid,
                "goodsPrice": goodsprice,
                "goodsNumber": goodsnumber,
                "memberId": memberid,
                "goodsName": "string",
                "goodsImg": "string"
            }
            this.$http.post(url, data).then(res => {
                //console.log(res)
                this.$message.info(res.data.data)
            })
        },

        handleChange(value) {
            console.log(value);
        },
        loadData(id) {
            //let url='http://localhost:5217/product/detail?id=' + id
            let url = this.$baseUrl + 'new/product/sku/detail'
            this.$http.get(url, {
                params: {
                    id: id
                }
            }).then(res => {
                console.log(res)
                this.detailData = res.data.data.info
                this.color = res.data.data.colors
                this.size = res.data.data.sizes
            })
        }
    }
}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>